<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>简乐远景</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/justified-nav.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="css/carousel.css">
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
</head>

<body>
<div class="container">
    <div class="masthead">
        <h2 class="text-muted">简乐远景</h2>
        <nav role="navigation">
            <ul class="nav nav-justified" id="navTitle">
                <li class="active"><a href="#" id="main">主页</a></li>
                <!--<li><a href="#" id="readme">公司结构</a></li>-->
                <li><a href="#" id="product">产品简介</a></li>
                <!--<li><a href="#" id="news">新闻</a></li>-->
                <li><a href="#" id="about">关于我们</a></li>
                <li><a href="#" id="zp">人才招聘</a></li>
                <li><a href="#" id="contact">联系我们</a></li>
            </ul>
        </nav>
    </div>
    <div class="row" id="content"></div>
    <!-- Site footer -->
    <footer class="footer">
        <p>&copy; Company 简乐远景 2014</p>
    </footer>
</div>
</body>
<script type="text/javascript">
    $(function () {
        $('#content').load("page/main.html", function () {
//            console.info("load readMe1!");
        });
        $("#main").on('click', function () {
            $('#content').load("page/main.html", function () {
//                console.info("load main!");
            });
            $("#navTitle li").removeClass("active");
            $(this).parent().addClass("active");
        });
//        $("#readme").on('click', function () {
//            $('#content').load("page/readme.html", function () {
//                console.info("load readMe2!");
//            });
//            $("#navTitle li").removeClass("active");
//            $(this).parent().addClass("active");
//        });
        $("#product").on('click', function () {
            $('#content').load("page/product.html", function () {
//                console.info("load readMe3!");
            });
            $("#navTitle li").removeClass("active");
            $(this).parent().addClass("active");
        });
        $("#about").on('click', function () {
            $('#content').load("page/about.html", function () {
//                console.info("load readMe3!");
            });
            $("#navTitle li").removeClass("active");
            $(this).parent().addClass("active");
        });
        $("#contact").on('click', function () {
            $('#content').load("page/contact.html", function () {
//                console.info("load readMe3!");
            });
            $("#navTitle li").removeClass("active");
            $(this).parent().addClass("active");
        });
//        $("#news").on('click', function () {
//            $('#content').load("page/news.html", function () {
////                console.info("load readMe3!");
//            });
//            $("#navTitle li").removeClass("active");
//            $(this).parent().addClass("active");
//        });
        $("#zp").on('click', function () {
            $('#content').load("page/zp.html", function () {
//                console.info("load readMe3!");
            });
            $("#navTitle li").removeClass("active");
            $(this).parent().addClass("active");
        });
    });
</script>
</html>
